import React, { useState, useEffect } from 'react'
import cls from 'classnames';


import './index.scss'
import { Overlay } from '../Overlay'
import { View } from '@tarojs/components'
import { Icon } from '../Icon';

const getClassNames = (name: string) => ({
    enter: `xxm-${name}-enter xxm-ls-${name}-enter-active enter-class enter-active-class`,
    'enter-to': `xxm-${name}-enter-to xxm-ls-${name}-enter-active enter-to-class enter-active-class`,
    leave: `xxm-${name}-leave xxm-ls-${name}-leave-active leave-class leave-active-class`,
    'leave-to': `xxm-${name}-leave-to xxm-ls-${name}-leave-active leave-to-class leave-active-class`,
});


const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30));

export interface IPopupProps {
    overlay?: boolean
    visible: boolean
    zIndex?: number
    round?: boolean
    duration?: number
    closeable?: boolean
    closeIcon?: string
    closeIconPosition?: string
    closeOnClickOverlay?: boolean
    position?: string
    safeAreaInsetBottom?: boolean
    safeAreaInsetTop?: boolean
    name?: string
    onClose: ()=> void
    customStyle?: React.CSSProperties
}

export const Popup: React.FC<IPopupProps> = ({
    overlay = true,
    visible = true,
    zIndex = 10000,
    position = 'center',
    closeIcon = 'close',
    duration = 300,
    closeIconPosition = 'top-right',
    name = 'fade',
    
    ...rest
}) => {

    const [classes, setClasses] = useState<string>()
    const [inited, setInited] = useState<boolean>(false)
    const [display, setDisplay] = useState<string>('none')
    // const []

    let transitionEnd
    const transition = () => {
        if (transitionEnd) {
            return;
        }
        transitionEnd = true;
        if (!visible && display === 'block') {
            setDisplay('none')
        }
    }
    const enter = () => {
        // const { duration, name } = this.data;
        const classNames = getClassNames(name);
        // status = 'enter'

        Promise.resolve()
            .then(nextTick)
            .then(() => {
                setInited(true)
                setClasses(classNames.enter)
                setDisplay('block')

            })
            .then(nextTick)
            .then(() => {
                transitionEnd = false
                setClasses(classNames["enter-to"])
            })
            .catch(() => { });


    }

    const leave = () => {

        if (display === 'none') {
            return;
        }
        const classNames = getClassNames(name);
        // status = 'leave';
        Promise.resolve()
            .then(nextTick)
            .then(() => {
                //   this.checkStatus('leave');
                //   this.$emit('leave');

                setClasses(classNames.leave)
            })
            .then(nextTick)
            .then(() => {
                transitionEnd = false
                setTimeout(() => transition(), duration);
                setClasses(classNames["leave-to"])
            })
            .catch(() => { });
    }
    useEffect(() => {
        visible ? enter() : leave()
    }, [visible])
    // to do 完善
    return (
        <React.Fragment>
            {
                overlay &&
                <Overlay
                    visible={visible}
                    onClick={()=>{
                        rest.closeOnClickOverlay && rest.onClose()
                    }}
                />
            }
            {inited && <View className={
                cls('xxm-popup-ls',
                    `xxm-popup-ls--${position}`,
                    classes, {
                    'xxm-popup-ls--round': rest.round,
                    'xxm-popup-ls--safe': rest.safeAreaInsetBottom,
                    'xxm-popup-ls--safeTop': rest.safeAreaInsetTop,

                })
            }
                style={{
                    zIndex,
                    WebkitTransitionDuration: `${duration}ms`,
                    transitionDuration: `${duration}ms`,
                    display,
                    ...rest.customStyle
                }}
                onTransitionEnd={transition}
            >
                {rest.children}
                {rest.closeable && <Icon
                    name={closeIcon}
                    size={20}
                    onClick={rest.onClose}
                    // customIconStyle={{cursor: 'painter'}}
                    customClass={`xxm-popup-ls__close-icon xxm-popup-ls__close-icon--${closeIconPosition}`}
                />
                }
            </View>
            }
        </React.Fragment>
    )
}